<template>
	<view class="contener">
		<view class="biaodanBox">
			<view class="contener700" style="padding-top: 10rpx;">
				<view class="orderListbox">
					<!-- <view class="between">
						<text style="font-size: 30rpx;">订单号:{{item.orderNum}}</text>
					</view> -->
					<view>
						<view>
							<view style="margin-top: 5rpx;">
								<view class="between2">
									<view style="white-space: nowrap;">
										{{item.plotName}}
										<view class="futext">区域: {{item.regionName}}
											<view style="display: inline-block;">
												<uni-tag style="margin-left: 10rpx;" :text="'长:'+item.lon+'m'"
													type="default" size="mini"></uni-tag>
												<uni-tag style="margin: 0 5rpx;" :text="'宽:'+item.wide+'m'"
													type="default" size="mini"></uni-tag>
											</view>
										</view>

									</view>
									<view>
										<button type="primary" @tap="handleMapLocation" plain size="mini">导航</button>
									</view>
								</view>
								<view>

									<view class="item">
										<text class="labelFont">
											押金:
										</text>
										<view style="display: inline-block">
											<u--text mode="price" color="#ffa502" size="18"
												:text="item.payAmount - comboMeal.price">
											</u--text>
										</view>
									</view>

									<view class="item">
										<text class="labelFont">套餐:</text>
										<text class="contentFont">{{comboMeal.describe}}</text>
									</view>

									<view class="item">
										<text class="labelFont">续租天数:</text>
										<text class="contentFont">{{comboMeal.day}}</text>
									</view>
									<view class="item">
										<text class="labelFont">费用:</text>
										<view style="display: inline-block">
											<u--text mode="price" color="#ffa502" size="18"
												:text="item.payAmount - (item.payAmount - comboMeal.price)">
											</u--text>
										</view>
									</view>
									<view class="item" v-if="!service.check.isNull(comboMeal.remark)">
										<text class="labelFont">备注:</text>
										<text class="contentFont">{{comboMeal.remark}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="orderListprice">

						<view style="color: #f00;" v-if="!item.isRenewal">
							合计:<text style="transform: scale(.8);display: inline-block;">￥</text>{{item.payAmount}}
						</view>
						<view style="color: #f00;" v-else>
							续租花费 : <text style="transform: scale(.8);display: inline-block;">￥</text>{{comboMeal.price}}
						</view>
					</view>
				</view>

				<view class="orderListbox orderListbox2" v-if="!item.isRenewal">
					<view class="between">
						<text style="font-size: 30rpx;">订单信息</text>
					</view>
					<view class="detailsBox">
						<view class="detailsBoxLeft">
							<view>订单编号:
								{{item.orderNum}}
							</view>
							<view style="margin: 10rpx 0;">创建时间: {{item.createTime}}</view>
						</view>
					</view>
				</view>

				<view v-if="item.status === 0 || item.isRenewal" class="orderListbox3">
					<view class="between">
						<text style="font-size: 30rpx;">支付方式</text>
					</view>
					<radio-group name="pay" @change="payWay">
						<view class="plotAddressBorder between3">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/pay_icon.png"
										class="icon"></image>
								</view>
								<view>
									微信支付
								</view>
							</view>
							<view>
								<radio value="wechat" />
							</view>
						</view>
						<view class="plotAddressBorder between3">
							<view class="center_vertical">
								<view>
									<image
										src="https://www.tdtye.com/files/vegetable_mall_file/default/static/growVegetables/wallet_icon.png"
										class="icon">
									</image>
								</view>
								<view>
									余额支付
								</view>
							</view>
							<view>
								<radio value="balance" />
							</view>
						</view>
					</radio-group>
				</view>
				<button class="paybtn2" @click="pay(item.orderNum)" type="primary"
					v-if="item.status === 0 || item.isRenewal">
					{{item.isRenewal ? '立即续期' : '立即支付'}}
				</button>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getTime
	} from '@/utils/auth.js'
	import SOtime from "@/js_sdk/fl-SOtime/SOtime";
	import service from "@/utils/service";
	export default {
		data() {
			return {
				service: service,
				item: {},
				imgapi: "",
				/* 套餐信息 */
				comboMeal: {},
			}
		},
		onLoad(e) {
			this.imgapi = this.$reqConfig.URLIMAGE
			this.item = JSON.parse(e.item)
			console.log('路由过来的参数 : ', this.item)
			this.item.createTime = SOtime.time3(this.item.createTime)
			this.getRentalMenuDetail();
		},
		methods: {
			//单选事件
			payWay(e) {
				this.payMode = e.detail.value
			},
			//支付订单
			async pay(orderNum) {
				let _t = this;
				if (!this.payMode) {
					uni.showToast({
						title: "请选择支付方式",
						icon: 'none',
						duration: 2000
					})
					return;
				}
				if (this.item.isRenewal) {
					let res = await this.createOrder();
					console.log("创建订单 :", res)
					if (res.code === 0) {
						orderNum = res.result;
					} else {
						uni.showToast({
							title: '创建新订单失败 : ' + res.result,
							icon: 'none',
						})
						return;
					}
				}
				//成功提交执行对应操作
				if (this.payMode === "balance") {
					this.balancePay(orderNum)
				} else {
					console.log("微信支付")
					let wxOrderRes = await service.request.createWxOrder(orderNum, 6, _t.$axios);
					if (wxOrderRes.code === 0) {
						service.request.wxPayment(wxOrderRes.result,
							function success(res) {
								console.log("微信支付 : ", res)
								uni.showToast({
									title: '微信支付成功',
									duration: 4000,
									mask: true
								})
								//跳转到订单列表
								uni.redirectTo({
									url: './rentOrder'
								})
								_t.dingyue();
							},
							function fail(res) {
								console.log("微信支付失败...")
								uni.showToast({
									title: '微信支付失败...',
									duration: 4000,
									icon: 'none',
								})
								//跳转到订单列表
								uni.redirectTo({
									url: './rentOrder'
								})
							},
						)
					} else {
						uni.showToast({
							title: '创建微信订单失败 : ' + wxOrderRes.result,
							icon: 'none'
						})
						//跳转到订单列表
						uni.redirectTo({
							url: './rentOrder'
						})
					}
				}
			},

			// 新建订单
			createOrder() {
				let _t = this;
				return new Promise(function(resolve, reject) {
					uni.showLoading({
						title: '新建订单中',
						mask: true
					})
					_t.$axios({
						url: `/user/rent/subOrder`,
						method: "post",
						data: {
							id: _t.item.regionId,
							rentMenuId: _t.item.rentMenuId,
						}
					}).then(res => {
						if (res.code === 0) {
							resolve(res)
						} else {
							reject(res)
						}
					}).finally(() => {
						uni.hideLoading();
					})
				})
			},
			// 余额支付
			balancePay(orderNum) {
				let _t = this;
				uni.showLoading({
					title: "余额支付中......"
				})
				this.$axios({
					url: `user/rent/payAmount`,
					method: "post",
					data: {
						orderNum
					}
				}).then((res) => {
					if (res.code === 0) {
						uni.showToast({
							title: "支付成功!",
							icon: 'none',
							duration: 2000
						})
						_t.dingyue();
					}
				}).finally(() => {
					uni.hideLoading();
					uni.redirectTo({
						url: './rentOrder'
					})
				})
			},
			dingyue() {
				//获取订阅消息权限
				uni.requestSubscribeMessage({
					//此处填写刚才申请模板的模板ID
					tmplIds: ['s7ZZ8opxPGkuCdexJnwhE882MzSxwKYXTw_ebj7gxBU'],
				})
			},
			// 导航
			handleMapLocation() {
				console.log('进入导航')
				// todo: 订单没有冗余 土地地址名称 导致导航不显示地址名称
				service.handleMapLocation(this, this.item.lat, this.item.lng)
			},
			getRentalMenuDetail() {
				let _t = this;
				this.$axios({
					url: "user/rent/rentalMenuDetail",
					method: "post",
					data: {
						id: _t.item.rentMenuId,
					}
				}).then(res => {
					console.log("user/rent/rentalMenuDetail  :", res)
					if (res.code === 0) {
						_t.comboMeal = res.result;
					} else {
						uni.showToast({
							title: '获取套餐信息失败 : ' + res.result,
							icon: "none"
						})
					}
				})
			}
		}
	}
</script>

<style scoped>
	.futext {
		color: rgb(143, 147, 156);
		font-size: 35rpx;
		font-weight: normal;
		white-space: nowrap;
	}

	.detailsBox {
		/* height: 180rpx; */
		width: 750rpx;
		padding: 20rpx 0 0;
		display: flex;
	}

	.paybtn2 {
		background-color: #18BC37;
		margin: 20rpx 0;
	}

	.orderListbox {
		margin-top: 20rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		/* height: 280rpx; */
		padding: 20rpx;
	}

	.orderListbox3 {
		margin: 20rpx 0 30rpx;
		width: 660rpx;
		background-color: #fff;
		border-radius: 20rpx;
		height: 280rpx;
		padding: 20rpx;
	}

	.icon {
		width: 50rpx;
		height: 50rpx;
		margin-right: 20rpx;
		margin-top: 10rpx;
	}

	.plotAddressBorder {
		width: 100%;
		/* background-color: #000000; */
		margin-top: 20rpx;
		padding-top: 20rpx;
		border-bottom: 0.5rpx solid #eeeeee;
		display: flex;
		justify-content: space-between;
	}

	.orderListbox2 {
		/* height: 240rpx !important; */
	}

	/deep/ .between3.data-v-16353827 {
		width: 100%;
	}

	.detailsBoxLeft {
		width: 65%;
		font-size: 35rpx;
		color: #808080;
		/* background-color: #00A0DC; */
	}

	.detailsBoxRight {
		width: 25%;
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: center;
	}

	.between {
		padding-bottom: 15rpx;
		border-bottom: 0.5rpx solid #C4C4C4;
	}

	.between2 {
		display: flex;
		justify-content: space-between;
		width: 640rpx;
	}

	.orderListboximg {
		margin-top: 10rpx;
		border-radius: 20rpx;
		width: 130rpx;
		height: 130rpx;
	}

	.orderListxinxi {
		margin-top: 10rpx;
		height: 130rpx;
		display: flex;
	}


	.paybtn {
		height: 70rpx;
		line-height: 70rpx;
		font-size: 28rpx;
		border-radius: 20rpx;
		transform: scale(0.9);
		background-color: #fff;
	}

	.balckborder {
		border: 1rpx solid #747474;
		color: #747474;
	}

	.redborder {
		border: 1rpx solid #e20f0f;
		color: #e20f0f;
	}

	.greenborder {
		border: 1rpx solid #3282c8;
		color: #3282c8;
	}

	.paybtnBox {
		display: flex;
	}

	.snapshot {
		text-align: left;
		margin-top: 20rpx;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
		font-size: 25rpx;
	}

	.item {
		margin-bottom: 4rpx;
	}

	.labelFont {
		padding-right: 4rpx;
		letter-spacing: 0.1em;
		font-size: 28rpx;
		color: #7f8c8d;
	}

	.contentFont {
		font-size: 32rpx !important;
		letter-spacing: 2rpx !important;
		color: #222f3e !important;
	}
</style>